<template>
  <div ref="mychart" style="width: 100%" :style="{ height: height }"></div>
</template>

<script setup>
import * as echarts from 'echarts'
import { onMounted, ref, nextTick, watch } from 'vue'
const mychart = ref()
const props = defineProps({
  styleObj: {
    type: Object,
    default: () => {}
  },
  height: {
    type: String,
    default: '180px'
  },
  chartData: {
    type: Array,
    default: () => []
  },
  source: {
    type: String,
    default: ''
  }
})
watch(
  () => props.chartData,
  (newValue, oldValue) => {
    if (newValue) {
      // console.log('watch 已触发', newValue)
      init()
    }
  },
  { deep: true }
)
const tooltip = {
  trigger: 'axis',
  confine: true
}
const grid = {
  left: '2%',
  right: '2%',
  bottom: '3%',
  top: '20%',
  containLabel: true
}
const legend = {
  // left: 0,
  itemWidth: 6,
  itemHeight: 6,
  borderRadius: 6,
  textStyle: {
    color: '#666',
    fontSize: 12
  }
}

onMounted(() => {
  nextTick(() => {
    init()
  })
})

function init() {
  let option = {}
  if (props.source == 'line') {
    option = {
      tooltip,
      legend: {
        itemGap: 20,
        data: ['正确率', '错误率']
      },
      xAxis: {
        data: props.chartData.map((item) => {
          return item.name
        }),
        axisLabel: {
          rotate: 30,
          width: 60,
          overflow: 'truncate',
          ellipsis: '...'
        }
      },
      yAxis: {
        type: 'value',
        min: 0,
        max: 100,
        axisLabel: {
          formatter: '{value} %'
        }
      },
      series: [
        {
          name: '正确率',
          type: 'line',
          data: props.chartData.map((item) => {
            return item.rightRate
          }),
          tooltip: {
            valueFormatter: function (value) {
              return value + '%'
            }
          },
          itemStyle: {
            color: '#83CEFD'
          },
          areaStyle: {
            color: {
              type: 'linear',
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [
                { offset: 0, color: 'rgba(131, 206, 253, 0.2)' },
                { offset: 0.8, color: 'rgba(131, 206, 253, 0)' }
              ]
            }
          }
        },
        {
          name: '错误率',
          type: 'line',
          data: props.chartData.map((item) => {
            return item.wrongRate
          }),
          tooltip: {
            valueFormatter: function (value) {
              return value + '%'
            }
          },
          itemStyle: {
            color: '#ABECB9'
          },
          areaStyle: {
            color: {
              type: 'linear',
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [
                {
                  offset: 0,
                  color: 'rgba(171, 236, 185, 0.2)' // 0% 处的颜色
                },
                {
                  offset: 0.8,
                  color: 'rgba(171, 236, 185, 0)' // 100% 处的颜色
                }
              ]
            }
          }
        }
      ]
    }
  } else if (props.source == 'bar') {
    option = {
      tooltip,
      legend: {
        itemGap: 20,
        data: ['正确数量', '错误数量']
      },
      xAxis: {
        data: props.chartData.map((item) => {
          return item.name
        }),
        axisLabel: {
          rotate: 30,
          width: 60,
          overflow: 'truncate',
          ellipsis: '...'
        }
      },
      yAxis: {
        type: 'value'
      },
      series: [
        {
          name: '正确数量',
          type: 'bar',
          data: props.chartData.map((item) => {
            return item.rightNum
          }),
          barMaxWidth: 8,
          barMinWidth: 1,
          barGap: '100%',
          itemStyle: {
            color: '#D2DDF6',
            borderRadius: 8
          }
        },
        {
          name: '错误数量',
          type: 'bar',
          data: props.chartData.map((item) => {
            return item.wrongNum
          }),
          barMaxWidth: 8,
          barMinWidth: 1,
          barGap: '100%',
          itemStyle: {
            color: '#5689FE',
            borderRadius: 8
          }
        }
      ]
    }
  } else if (props.source == 'reportcard') {
    option = {
      tooltip,
      xAxis: {
        data: props.chartData.map((item) => {
          return item.createTime
        }),
        axisLabel: {
          rotate: 30,
          width: 60,
          overflow: 'truncate',
          ellipsis: '...'
        }
      },
      yAxis: {
        type: 'value',
        min: 0,
        max: 100,
        // axisLabel: {
        //   formatter: '{value} %'
        // }
      },
      series: [
        {
          type: 'line',
          data: props.chartData.map((item) => {
            return item.scoreRate
          }),
          tooltip: {
            valueFormatter: function (value) {
              return value + '%'
            }
          },
          itemStyle: {
            color: '#83CEFD'
          },
          areaStyle: {
            color: {
              type: 'linear',
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [
                { offset: 0, color: 'rgba(131, 206, 253, 0.2)' },
                { offset: 0.8, color: 'rgba(131, 206, 253, 0)' }
              ]
            }
          }
        }
      ]
    }
  }
  const myChart = echarts.init(mychart.value)
  option.grid = grid
  option.legend = { ...option.legend, ...legend }
  // console.log(option)
  myChart.setOption(option)
  window.onresize = function () {
    // 自适应大小
    myChart.resize()
  }
}
</script>
